<template>
  <!-- 采购退货 -->
  <div class="app-container">
    <mainTilte title="退货商品明细信息" />
    <el-form ref="form" :model="form" :rules="roleCodeRule" label-width="120px">
      <el-table :data="bareData" stripe fit border>
        <el-table-column type="selection" width="55" />
        <el-table-column fixed="left" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: #ff4444"
              @click="deleteClick(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="suppierCode"
          label="采购单号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="suppierCode"
          label="合同号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="suppierCode"
          label="系统sku"
          width="180"
          align="center"
        />
        <el-table-column
          prop="chineseName"
          label="中文名称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="enName"
          label="英文名称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="rate"
          label="箱率"
          width="180"
          align="center"
        />
        <el-table-column
          prop="number"
          label="采购数量"
          width="180"
          align="center"
        />
        <el-table-column
          prop="purchaseAmount"
          label="已转运数量"
          width="180"
          align="center"
        />
        <el-table-column
          prop="purchaseAmount"
          label="待转运数量"
          width="180"
          align="center"
        />
        <el-table-column
          label="申请退货数量"
          prop="number"
          min-width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-form-item
              prop="number"
              class="no-label"
              :rules="[
                {
                  required: true,
                  message: '请输入申请退货数量',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="scope.row.number"
                placeholder="请输入申请退货数量"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="交货日期"
          width="180"
          align="center"
        ><template slot-scope="scope">
          {{
            scope.row.arrive_date | formatDate("{y}-{m}-{d}")
          }}
        </template>
        </el-table-column>
        <el-table-column
          prop="tip"
          label="备注"
          width="200"
          align="center"
        />
      </el-table>
      <el-row style="margin-top: 15px">
        <el-col :span="10">
          <el-form-item label="备注" prop="notes">
            <el-input v-model="form.notes" type="textarea" autosize />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item class="text-center">
          <el-button type="primary" @click="onSubmit">确认退货</el-button>
          <el-button>取消退货</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'PurchaseContractReturn',
  data() {
    return {
      form: {
        id: null, // 出运单号
        shippingType: null, // 运输方式
        departure: null, // 起运港
        destination: null, // 目的港
        cabinetType: null, // 拼柜类型
        cabinetNumber: null, // 柜号
        cabinet: null, // 柜型
        sealNumber: null, // 封箱号
        nameVoyage: null, // 船名航次
        freightForwarder: null, // 货代
        loadingDate: null, // 装柜日期
        etd: null, // 起运日期
        arrivalDate: null, // 预计到仓日期
        ladingNo: null, // 提单号
        notes: null // 备注
      },
      issignContract: [
        {
          name: '海运',
          code: ''
        }
      ],
      roleCodeRule: {},
      bareData: [
        {
          suppierCode: '000',
          chineseName: '11',
          enName: '11',
          rate: '11',
          number: '11',
          unitPrice: '11',
          purchaseAmount: '11',
          date: '11',
          tip: '11'
        }
      ]
    }
  },
  methods: {
    deleteClick(row) {},
    onSubmit() {}
  }
}
</script>

<style scoped>
/deep/ .el-date-editor,
.el-select {
  width: 100%;
}
.text-center {
  text-align: center;
  margin-top: 20px;
}
</style>
